<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
</style>
<body>
<h1 id="timer">0.000</h1>
<button onclick="startTimer()" id="start">开始</button>
<button onclick="stopTimer()" id="stop" disabled>停止</button>
<button onclick="resetTimer()" id="reset" disabled>重置</button>

<script>
    let timerInterval;
    let startTime;
    let elapsedTime = 0;
    const timerElement = document.getElementById("timer");
    const startButton = document.querySelector('#start')
    const stopButton = document.querySelector('#stop')
    const resetButton = document.querySelector('#reset')
    function startTimer() {
        startTime = Date.now() - elapsedTime;
        timerInterval = setInterval(updateTimer, 10); //? 更新计时器，精度为毫秒级
        startButton.setAttribute('disabled','true')
        resetButton.setAttribute('disabled','true')
        stopButton.removeAttribute('disabled')
    }

    function stopTimer() {
        clearInterval(timerInterval);
        startButton.removeAttribute('disabled')
        resetButton.removeAttribute('disabled')
        stopButton.setAttribute('disabled','true')
    }

    function resetTimer() {
        clearInterval(timerInterval);
        elapsedTime = 0;
        timerElement.textContent = "0.000";
    }

    function updateTimer() {
        const currentTime = Date.now();
        elapsedTime = currentTime - startTime;
        const seconds = (elapsedTime / 1000).toFixed(3);
        timerElement.textContent = seconds;
    }
</script>
</body>

</html>
